<template>
  <div class="sales">
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分start
        -->
    <!--<mt-header fixed title="销售业绩">-->
      <!--<router-link to="/" slot="left">-->
        <!--<mt-button icon="back">返回</mt-button>-->
      <!--</router-link>-->
      <!--<mt-button icon="more" slot="right"></mt-button>-->
    <!--</mt-header>-->
    <!--
            作者：offline
            时间：2017-12-22
            描述：头部mintui共用部分end
        -->
    <div class="num">
      <h3>￥20099</h3>
      <h6>本月总业绩</h6>
    </div>
    <div>
      <div class="self-operation">
        <h3>{{list.selfCommission}}</h3>
        <h6>自营佣金</h6>
      </div>
      <div class="team">
        <h3>￥99</h3>
        <h6>团队佣金</h6>
      </div>
    </div>
    <div id="myChart" :style="{width:'100%', height: '4rem',left:'4%!important'}"></div>
    <div class="sales_fx">
      <div class="s_fxtop">
        <div class="sx_title">
          本月销售分析
        </div>
        <div class="sx_t">
          <div class="sx_tleft">
            <div class="sx_lleft">
              <p class="sl_money">
                ￥20099
              </p>
              <p class="all_yongji yongji">
                总佣金
              </p>
            </div>
          </div>
          <div class="sx_tright">
            <div class="sx_lright">
              <p class="sl_money">
                ￥99
              </p>
              <p class="team_yongji yongji">
                团队奖励佣金
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="sx_f">
        <div class="sx_fleft">
          <div class="sx_lleft">
            <p class="sl_money">
              {{list.successNum}}
            </p>
            <p class="all_yongji yongji">
              拼单成功
            </p>
          </div>
        </div>
        <div class="sx_fright">
          <div class="sx_lright">
            <p class="sl_money">
              ￥300
            </p>
            <p class="team_yongji yongji">
              退货退款额
            </p>
          </div>
        </div>

      </div>
    </div>
    <loading v-show="showLoading "></loading>
  </div>


</template>

<script>
  /* eslint-disable key-spacing,space-before-blocks,no-tabs,indent,space-before-function-paren,semi,quotes,quotes,spaced-comment,no-undef,no-trailing-spaces,no-unused-vars */
  // eslint-disable-next-line no-multiple-empty-lines
  import Vue from 'vue'
  import Mint from 'mint-ui'
  import 'mint-ui/lib/style.css'
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  Vue.use(Mint)
  export default {
    name: 'Sales',
// eslint-disable-next-line space-before-blocks
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        showLoading: true, //显示加载动画
        list:{}
      }
    },
// eslint-disable-next-line space-before-function-paren
    mounted() {
      this.drawLine();
    },
    methods: {
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        let jsonValue = JSON.stringify({
          "c": "10015",
          "p": {
// eslint-disable-next-line spaced-comment
            "userId": JSON.parse(window.localStorage.data).id, //用户ID
            "tokenId":token()
          }
        });
        this.$http.post(api+'/qqs.us', jsonValue).then((res) => {
          this.hideLoading();
          this.list = res.data.p;
          console.log(this.list)
          console.log(this.list.selfCommission);
          myChart.setOption({
            title: {
              text: ''
            },
            tooltip: {},
            series: [{
              name: '销售业绩',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'left'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '18',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{
// eslint-disable-next-line no-undef
                value: this.list.selfCommission,
                name: '退款额度'
              },
                {
                  value: 300,
                  name: '团队佣金'
                },
                {
                  value:this.list.successNum,
                  name: '拼单成功'
                },
                {
                  value: 1000,
                  name: '自营佣金'
                }
              ]
            }]
          })
        })
// eslint-disable-next-line no-unused-vars
        // 绘制图表
        myChart.setOption({
          title: {
            text: ''
          },
          tooltip: {},

          series: [{
            name: '销售业绩',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'left'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
// eslint-disable-next-line no-undef
              value: 300,
              name: '退货退款额'
            },
              {
                value: 300,
                name: '团队佣金'
              },
              {
                value: 100,
                name: '拼单成功'
              },
              {
                value: 1000,
                name: '自营佣金'
              }
            ]
          }]
        })
      }
    },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        varThis.hideLoading()
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    }
   }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mint-header {
    width: 100%;
    background: #1c1b20;
  }

  .num {
    background: #fd6444;
    width: 100%;
    height: 180px;
    text-align: center;
    color: #FFFFFF;
    padding-top: 50px;
    /*margin-top: 40px;*/
  }

  .num h3 {
    font-size: 44px;
  }

  .num h6 {
    margin-top: 26px;
    font-size: 28px;
  }

  .self-operation {
    width: 50%;
    height: 120px;
    float: left;
    background: #fd755d;
    text-align: center;
    color: #FFFFFF;
  }

  .team {
    width: 50%;
    height: 120px;
    float: left;
    background: #fe4a30;
    text-align: center;
    color: #FFFFFF;
  }

  .self-operation h3 {
    font-size: 38px;
    margin-top: 20px;
  }

  .self-operation h6 {
    font-size: 24px;
    margin-top: 5px;
  }

  .team h3 {
    font-size: 38px;
    margin-top: 20px;
  }

  .team h6 {
    font-size: 24px;
    margin-top: 5px;
  }

  .sales_fx {
    width: 100%;
    height: 410px;
    background: #F4F4F4;
    padding-top: 20px;
    margin-top: 100px;
  }

  .s_fxtop {
    width: 100%;
    height: 240px;
    background: #FFFFFF;
  }

  .sx_title {
    padding-left: 30px;
    padding-top: 30px;
    font-size: 24px;
    font-family: "黑体";
    width: 95%;
    height: 80px;
  }

  .sx_t {
    width: 100%;
    height: 130px;
  }

  .sx_f {
    width: 100%;
    height: 130px;
    background: #FFFFFF;
    padding-top: 34px;
  }

  .sx_tleft,
  .sx_tright,
  .sx_fright,
  .sx_fleft {
    width: 50%;
    height: 130px;
    float: left;
    text-align: center;
  }

  .sx_lleft {
    width: 100%;
    height: 95px;
    border-right: 2px solid #ffdad4;

  }

  .sx_lright {
    width: 100%;
    height: 95px;

  }

  .sl_money {
    width: 100%;
    font-size: 32px;
    color: #fe391d;
  }

  .yongji {
    font-size: 24px;
    color: #8c8c8c;
    margin-top: 10px;
  }

  .s_fxtop {
    border-bottom: 1px solid #ffdad4;
  }

</style>
